<template>
	<view>
		<view>
			<view class="bgWhite" style="padding: 20rpx 32rpx;">
				<!-- <u-search placeholder="搜索商品" :showAction="false" @click="toSearch()" disabled="true"></u-search> -->
				<input
					type="text"
					placeholder="搜索商品"
					disabled="true"
					style="background: #eee;border-radius: 50rpx;font-size: 28rpx;padding: 13rpx;text-align: center"
					@click="toSearch()"
				/>
			</view>
		</view>
		<view class="content flex-r">
			<!-- <view class="bgWhite p16"><u-search placeholder="搜索商品" :showAction="false"></u-search></view> -->

			<scroll-view scroll-y class="left-aside">
				<view
					v-for="item in flist"
					:key="item.id"
					class="f-item b-b"
					:class="{ active: item.id === currentId }"
					@click="tabtap(item)"
				>
					{{ item.name }}
				</view>
			</scroll-view>
			<scroll-view
				scroll-with-animation
				scroll-y
				class="right-aside"
				@scroll="asideScroll"
				:scroll-top="tabScrollTop"
			>
				<view v-for="item in slist" :key="item.id" class="s-list" :id="'main-' + item.id">
					<text class="s-item">{{ item.name }}</text>
					<view class="t-list">
						<view
							@click="navToList(item.id, titem.id, titem.name)"
							v-if="titem.pid === item.id"
							class="t-item"
							v-for="titem in tlist"
							:key="titem.id"
						>
							<image :src="getsrc(titem.picture)"></image>
							<text>{{ titem.name }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { ImgIP } from '@/utils/comm.js'
import { getCate } from '@/api/category.js'
export default {
	data() {
		return {
			sizeCalcState: false,
			tabScrollTop: 0,
			currentId: 1,
			flist: [],
			slist: [],
			tlist: []
		}
	},
	onLoad() {
		this.loadData()
	},

	methods: {
		async loadData() {
			//let list = await this.$api.json('cateList')
			let list = await this.getData()

			//console.log('==>', list)
			// list.forEach(item => {
			// 	if (!item.pid) {
			// 		this.flist.push(item) //pid为父级id, 没有pid或者pid=0是一级分类
			// 	} else if (!item.picture) {
			// 		this.slist.push(item) //没有图的是2级分类
			// 	} else {
			// 		this.tlist.push(item) //3级分类
			// 	}
			// })
		},
		getsrc(url) {
			return ImgIP + url
		},
		toSearch() {
			uni.navigateTo({
				url: '/pages_C/search/search'
			})
		},
		getData() {
			getCate().then(
				res => {
					console.log(res)
					let list = res.cateList
					list.forEach(item => {
						if (!item.pid) {
							this.flist.push(item) //pid为父级id, 没有pid或者pid=0是一级分类
						} else if (!item.picture) {
							this.slist.push(item) //没有图的是2级分类
						} else {
							this.tlist.push(item) //3级分类
						}
					})
				},
				err => {
					console.log(err)
				}
			)
		},
		//一级分类点击
		tabtap(item) {
			if (!this.sizeCalcState) {
				this.calcSize()
			}
			console.log(item)

			this.currentId = item.id
			let index = this.slist.findIndex(sitem => sitem.pid === item.id)
			this.tabScrollTop = this.slist[index].top
		},
		//右侧栏滚动
		asideScroll(e) {
			if (!this.sizeCalcState) {
				this.calcSize()
			}
			let scrollTop = e.detail.scrollTop
			let tabs = this.slist.filter(item => item.top <= scrollTop).reverse()
			if (tabs.length > 0) {
				//this.currentId = tabs[0].pid
				console.log(tabs[0].pid)
			}
		},
		//计算右侧栏每个tab的高度等信息
		calcSize() {
			let h = 0
			this.slist.forEach(item => {
				let view = uni
					.createSelectorQuery()
					.in(this)
					.select('#main-' + item.id)
				view.fields(
					{
						size: true
					},
					data => {
						item.top = h
						h += data.height
						item.bottom = h
					}
				).exec()
			})
			this.sizeCalcState = true
		},
		navToList(sid, tid, name) {
			console.log(sid, tid, name)
			//if (pos != undefined) alert(`所在位置${pos}`)
			// uni.navigateTo({
			// 	url: `/pages/product/list?fid=${this.currentId}&sid=${sid}&tid=${tid}`
			// })
			uni.navigateTo({
				url: `/pages_C/goodList/goodList?tCategoryid=${tid}`
				//url: `/pages/goods/goods?tCategoryid=${tid}`
			})
		}
	}
}
</script>

<style lang="stylus" scoped>
.content
	position absolute
	top 108rpx
	bottom 0
	background #fff
	width 100%
	background-color #f8f8f8
.left-aside
	flex-shrink 0
	width 200rpx
	height 100%
	background-color #fff
.f-item
	display flex
	align-items center
	justify-content center
	width 100%
	height 100rpx
	font-size 28rpx
	color #666
	position relative
	&.active
		color #666
		background #f8f8f8
		&:before
			content ''
			position absolute
			left 0
			top 50%
			transform translateY(-50%)
			height 36rpx
			width 8rpx
			background-color #fa436a
			border-radius 0 4px 4px 0
			opacity 0.8
.right-aside
	flex 1
	overflow hidden
	padding-left 20rpx
.s-item
	display flex
	align-items center
	height 70rpx
	padding-top 8rpx
	font-size 28rpx
	color #666
.t-list
	display flex
	flex-wrap wrap
	width 100%
	background #fff
	padding-top 12rpx
	&:after
		content ''
		flex 99
		height 0
.t-item
	flex-shrink 0
	display flex
	justify-content center
	align-items center
	flex-direction column
	width 176rpx
	font-size 26rpx
	color #666
	padding-bottom 20rpx
	image
		width 140rpx
		height 140rpx
</style>
